<template>
  <div class="enclosure">
    <el-tooltip
      effect="dark"
      :content="item.name"
      placement="top"
      v-for="item in fileList"
      :key="item.uid"
    >
      <div class="enclosure-item">
        <img
          src="@/assets/img/word.webp"
          v-if="item.name.indexOf('.doc') > -1"
          alt=""
          @click="handleClickEnclosure(item.url)"
        />
        <img
          src="@/assets/img/excel.webp"
          v-else-if="item.name.indexOf('.xls') > -1"
          alt=""
          @click="handleClickEnclosure(item.url)"
        />
        <img
          src="@/assets/img/pdf.webp"
          v-else-if="item.name.indexOf('.pdf') > -1"
          alt=""
          @click="handleClickEnclosure(item.url)"
        />
        <el-image
          v-else
          style="width: 50px; height: 50px; margin: 0 auto; display: block"
          :src="item.url"
          fit="cover"
          :preview-src-list="[item.url]"
        ></el-image>
        <div class="enclosure-name">{{ item.name }}</div>
      </div>
    </el-tooltip>
  </div>
</template>
<script>
import requestUrl from '@/core/http/requestUrl';
import { getToken, objectToQueryString } from '@/utils';
const imgArr = ['.jpg', '.jpeg', '.png'];
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    // 模块区分
    // 1-项目；2-合同
    fielState: {
      type: String,
      default: '1'
    }
  },
  data () {
    return {
      fileList: [],
      // 上传的地址
      url: requestUrl('admin/app/leave/uploads'),
      downLoadUrl: requestUrl('admin/app/leave/downloads'),
      data: {
        fieldName: 'filePath',
        asImage: false
      }
    }
  },
  computed: {
    isImg () {
      return name => {
        const fileName = name;
        const fileType = fileName.substring(fileName.lastIndexOf('.'));
        console.log('文件类型', fileType);
        return imgArr.includes(fileType);
      }
    }
  },
  created () {
    this.parseData();
  },
  methods: {
    // 处理数据
    parseData () {
      console.log('处理数据', this.list);
      this.fileList = (this.list || []).map(v => {
        return {
          name: v.name,
          url: `${this.downLoadUrl}?${objectToQueryString({
            fieldName: 'filePath',
            filename: v.filename,
            fielState: this.fielState,
            asImage: this.isImg(v.name),
            Authorization: getToken()
          })}`
        }
      });
    },
    // 下载附件
    handleClickEnclosure (url) {
      window.location.href = url;
    }
  }
}
</script>
<style lang="scss" scoped>
.enclosure {
  display: flex;
  flex-wrap: wrap;
  .enclosure-item {
    flex-shrink: 0;
    width: 80px;
    margin-right: 20px;
    margin-bottom: 15px;
    img {
      width: 50px;
      height: 50px;
      object-fit: cover;
      margin: 0 auto;
      display: block;
    }
    .enclosure-name {
      width: 100%;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
